<template>
  <n-card :bordered="false">
    <div>
      <basic-form
        :schemas='schemas'
        :labelWidth='labelWidth'
        :gridProps='gridProps'
        @handleSearch='handleSearch'
        :pageParams='pageParams'
        size='small'
        ref="logSearchRef"
      >
      </basic-form>
      
      <basic-table
        :title='title'
        :data='data'
        :columns='columns'
        :loading="loading"
      >
        <template #tableTitle>
          <n-space>
            <!-- <n-button type='info' @click='handleAdd()'>添加</n-button> -->
          </n-space>
        </template>      
      </basic-table>

      <!-- 
        分页。
        为什么不用data-table自带的pagination分页呢？
        因为我发现table的pagination传递itemCount总条数时不生效，
        等找到解决方法时将pagination对象传递给basic-form即可
      -->
      <div class="pagination mt10">
        <n-pagination
          :item-count='pageConfig.total'
          :page-sizes='pageConfig.pageSizes'
          :showSizePicker='pageConfig.showSizePicker'
          :show-quick-jumper='pageConfig.showQuickJumper'
          :on-update:page="(pageNum)=>changePagination('pageNum', pageNum)"
          :on-update:page-size="(pageSize) => changePagination('pageSize', pageSize)"
          />
      </div>
    </div>
  </n-card>
</template>

<script lang="ts" setup>

  import { onMounted, ref, reactive, getCurrentInstance, h } from 'vue'
  import { OrderType } from '@/enums/tableEnum'
  import { list } from '@/api/commonApi'
  import { BasicForm } from '@/components/Form'
  import { BasicTable } from '@/components/Table'
  import { NTag } from 'naive-ui'

  const internalInstance = getCurrentInstance()
  const { getDict, selectDictLabel } = internalInstance?.appContext.config.globalProperties

  const statusOption = ref([])
  const data = ref([])
  const logSearchRef = ref()
  const title = ref('登录日志')
  const labelWidth = 110
  const gridProps = { cols: '1 500:2 800:3 1000:4 1250:5 1500:6' }
  const schemas = [
    {
      field: 'username',
      component: 'NInput',
      label: '用户名',
      placeholder: '请输入用户名',
      giProps: {
        span: 1
      }
    }
  ]
  const pageParams = reactive({
    orderByColumn: 'create_time',
    isAsc: OrderType.DESC,
    pageNum: 1,
    pageSize: 10
  })
  /** 分页配置 */
  const pageConfig = reactive({
    total: 0,
    pageSizes: [10, 20, 30, 40],
    showSizePicker: true,
    showQuickJumper: true
  })
  /** 点击分页上的按钮 */
  function changePagination(name: string, value: number) {
    pageParams[name] = value
    logSearchRef.value.handleSubmit()
  }

  function handleSearch(params: any) {
    getLoginLog(params)
  }

  function rendercc() {
    return `is a good guy111.`
  }

  const columns = [
    {
      type: 'selection'
    },
    {
      type: 'expand',
      expandable: false,
      renderExpand: (rowData) => {
        return `${rowData.username} is a good guy.`
      }
    },
    {
      title: '用户名',
      key: 'username',
      width: 120
    }, {
      title: 'IP地址',
      key: 'ip',
      width: 120
    }, {
      title: '登录位置',
      key: 'location',
      width: 120
    }, {
      title: '操作系统',
      key: 'os',
      width: 120
    }, {
      title: '浏览器',
      key: 'browser',
      width: 80
    }, {
      title: '登录状态',
      key: 'status',
      width: 60,
      render(row: any) {
        const showValue = selectDictLabel(statusOption.value, row.status)
        return h(
          NTag,
          {
            type: showValue == '成功' ? 'info' : 'error'
          },
          {
            default: () => showValue
          }
        )
      }
    }, {
      title: '操作信息',
      key: 'message',
      width: 60
    }, {
      title: '登录日期',
      key: 'createTime',
      width: 120
    }
  ]
  /** table是否loading */
  const loading = ref(false)

  const baseUrl = '/log/loginLog'

  function getLoginLog(params: any) {
    loading.value = true
    list(baseUrl, { ...params, ...pageParams }).then((result: any) => {
      data.value = result.data
      pageConfig.total = result.total
    }).finally(() => {
      loading.value = false
    })
  }

  onMounted(() => {
    getDict('success_status').then(res => {
      statusOption.value = res.data
      // 调用查询表单的查询方法
      logSearchRef.value.handleSubmit()
    })
  })


</script>